import React from 'react';
import useInput from './自定义hook-input.tsx';

const SimpleForm  = () => {
    const validateNotEmpty = (value: string) => value.trim() !== '';
    const { value, isValid, hasError, valueChangeHandler, inputBlurHandler, reset } = useInput(validateNotEmpty);

    const formSubmissionHandler = (event: React.FormEvent) => {
        event.preventDefault();

        if (!isValid) {
            return;
        }

        console.log('Submitted value:', value);
        reset();
    };

    const inputClasses = hasError ? 'input invalid' : 'input';

    return (
        <form onSubmit={formSubmissionHandler}>
            <div className={inputClasses}>
                <label htmlFor="name">Your Name</label>
                <input type="text" id="name" onChange={valueChangeHandler} onBlur={inputBlurHandler} value={value} />
                {hasError && <p className="error-text">Name must not be empty.</p>}
            </div>
            <button type="submit">Submit</button>
        </form>
    );
};

export default SimpleForm;
